<template>
    <div :style="{ marginTop: slider + 'px' }">
        <div class="page-shop"
            :style="{ marginLeft: prConfig + 'px', marginRight: prConfig + 'px', background: bgColor }"
            :class="bgStyle ? '' : 'shopOn'">
            <div v-if="titleUrl" class="title-count">
                <img :src="titleUrl">
            </div>
            <!--多行展示-->
            <div class="mobile-page" v-if="displayStyle == 2">
                <div class="shop-list">
                    <div v-for="(item, index) in shopList" class="list" :key="index">
                        <img src="@/assets/images/store_avatar.png">
                    </div>
                </div>
            </div>
            <!--单行展示-->
            <div class="mobile-page" v-else-if="displayStyle == 0">
                <div class="home-shop" v-for="(item, index) in shopList" :key="index">
                    <div class="shop-info" :style="{ background: bgColor.item }" :class="bgStyle ? '' : 'shopOn'">
                        <img class="bgImg" src="@/assets/images/store_bg.png" :class="bgStyle ? '' : 'shopOn'">
                        <div class="shop-title">
                            <img src="@/assets/images/store_avatar.png">
                            <div class="shop-name">{{ item.name }}</div>
                            <template v-if="distanceShow">
                                <div class="vertical-line"></div>
                                <div class="distance-text">1.6km</div>
                                <div class="store-type" :style="{ background: themeColor }">自营</div>
                            </template>
                            <div class="store-type" v-else :style="{ background: themeColor, marginLeft: '20px' }">自营
                            </div>
                        </div>
                    </div>
                    <div class="shop-product" :class="bgStyle ? '' : 'shopOn'">
                        <div v-for="(itm, idx) in item.proList" class="item" :key="idx">
                            <img v-if="itm.image" :src="item.image">
                            <div class="empty-box"><span class="iconfont-diy icontupian"></span></div>
                            <div class="info">
                                <div v-if="titleShow" class="name line1">{{ itm.store_name }}</div>
                                <div v-if="priceShow" class="price" :style="{ color: themeColor }">
                                    <priceFormat :price="itm.price" :align="'center'" weight intSize="20" floatSize="13"
                                        labelSize="13">
                                    </priceFormat>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 详情展示 -->
            <div class="mobile-page" v-else-if="displayStyle == 1">
                <div class="shop-info-wrapper" :style="borderRadiusStyle" v-for="(item, index) in shopList" :key="index">
                    <div class="shop-info-inner">
                        <img src="@/assets/images/store_avatar.png" class="shop-avatar" />
                        <div class="shop-info-detail">
                            <div class="shop-name">
                                {{ item.name }}
                                <span class="shop-type" :style="{ backgroundColor: themeColor }">官方旗舰店</span>
                            </div>
                            <div class="shop-other">
                                52.1万人关注
                                <template v-if="distanceShow">
                                    <span class="vertical-line"></span>
                                    1.6km
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="shop-good-wrapper">
                        <ul class="shop-good-list">
                            <li class="shop-good-item" v-for="(itm, idx) in item.proList" :key="idx">
                                <img class="good-img" :src="itm.image" v-if="itm.image" />
                                <div class="empty-box" v-else>
                                    <span class="iconfont-diy icontupian"></span>
                                </div>
                                <div class="good-name" v-if="titleShow">{{ itm.store_name }}</div>
                                <div class="good-price" v-if="priceShow" :style="{ color: themeColor }">
                                    <priceFormat :price="itm.price" weight intSize="14" floatSize="9"
                                        labelSize="10">
                                    </priceFormat>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="shop-more">更多店铺<span class="iconfont iconjinru"></span></div>
        </div>
    </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { mapState } from 'vuex'
import priceFormat from "@/components/priceFormat/index";
import { getHomeShopTabConfig } from './config';

export default {
    name: 'home_shop',
    cname: '品牌好店',
    icon: 'icondianpujie',
    configName: 'c_home_shop',
    type: 0,// 0 基础组件 1 营销组件 2工具组件
    defaultName: 'shopList', // 外面匹配名称
    components: { priceFormat },
    props: {
        index: {
            type: null
        },
        num: {
            type: null
        }
    },
    computed: {
        ...mapState('mobildConfig', ['defaultArray']),
        borderRadiusStyle() {
            return {
                borderRadius: (this.bgStyle == 1 ? 12 : 0) + "px"
            }
        }
    },
    watch: {
        pageData: {
            handler(nVal, oVal) {
                this.setConfig(nVal)
            },
            deep: true
        },
        num: {
            handler(nVal, oVal) {
                let data = this.$store.state.mobildConfig.defaultArray[nVal]
                this.setConfig(data)
            },
            deep: true
        },
        'defaultArray': {
            handler(nVal, oVal) {
                let data = this.$store.state.mobildConfig.defaultArray[this.num]
                this.setConfig(data);
            },
            deep: true
        }
    },
    data() {
        return {
            // 默认初始化数据禁止修改
            defaultConfig: {
                name: 'shopList',
                timestamp: this.num,
                setUp: {
                    tabVal: "0"
                },
                logoConfig: {
                    type: 1,
                    header: '标题图片',
                    title: '最多可添加1张，图片建议尺寸242*48px',
                    url: ''
                },
                numConfig: {
                    val: 4,
                    title: '店铺数量'
                },
                distanceShow: {
                    val: 1,
                    title: "是否显示商户距离"
                },
                shopsSort: {
                    title: '店铺排序',
                    name: 'shopsSort',
                    type: 0,
                    list: [
                        {
                            val: '默认',
                            icon: 'iconComm_whole'
                        },
                        {
                            val: '距离',
                            icon: 'icondingwei'
                        }
                    ]
                },
                tabConfig: getHomeShopTabConfig(),
                titleShow: {
                    title: '是否显示商品名称',
                    val: 1
                },
                priceShow: {
                    title: '是否显示价格',
                    val: 1
                },
                bgStyle: {
                    title: '背景样式',
                    name: 'bgStyle',
                    type: 1,
                    list: [
                        {
                            val: '直角',
                            icon: 'iconPic_square'
                        },
                        {
                            val: '圆角',
                            icon: 'iconPic_fillet'
                        }
                    ]
                },
                prConfig: {
                    title: '背景边距',
                    val: 0,
                    min: 0
                },
                themeColor: {
                    title: '主题风格',
                    name: 'themeColor',
                    default: [{
                        item: '#333333'
                    }],
                    color: [
                        {
                            item: '#333333'
                        }

                    ]
                },
                bgColor: {
                    title: '背景颜色',
                    name: 'bgColor',
                    default: [{
                        item: '#f5f5f5'
                    }],
                    color: [
                        {
                            item: '#f5f5f5'
                        }
                    ]
                },
                // 页面间距
                mbConfig: {
                    title: '页面间距',
                    val: 0,
                    min: 0
                }
            },
            boxStyle: '',
            bgColor: '',
            themeColor: '',
            slider: 0,
            // 展示样式
            displayStyle: 0,
            pageData: {},
            bgStyle: 0,
            prConfig: 0,
            titleUrl: "",
            titleShow: true,
            priceShow: true,
            distanceShow: false,
            shopList: [
                {
                    name: '小米商城',
                    avatar: 'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic: 'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList: [
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                },
                {
                    name: '小米商城',
                    avatar: 'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic: 'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList: [
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                },
                {
                    name: '小米商城',
                    avatar: 'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic: 'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList: [
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                },
                {
                    name: '小米商城',
                    avatar: 'http://mer1.crmeb.net/uploads/def/20210427/27ea72a7517c8a3e322122a0c8fca30a.png',
                    bgPic: 'http://mer1.crmeb.net/uploads/def/20210427/a88fb560fd8b83e3a1944f1e09069b7e.jpg',
                    proList: [
                        {
                            image: "",
                            store_name: "无线蓝牙耳机",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "苹果新款平板",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        },
                        {
                            image: "",
                            store_name: "蒸汽手持熨斗",
                            price: '1299.00'
                        }
                    ]
                }

            ],

        }
    },
    mounted() {
        this.$nextTick(() => {
            this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]
            this.setConfig(this.pageData)
        })
    },
    methods: {
        // 对象转数组
        objToArr(data) {
            let obj = Object.keys(data);
            let m = obj.map((key) => data[key]);
            return m;
        },
        generateShopList(data) {
            const shopList = (data.shopList && data.shopList.length > 0) ? data.shopList : this.shopList;

            while (shopList.length < data.numConfig.val) {
                shopList.push(...this.shopList);
            }

            return shopList.slice(0, data.numConfig.val);
        },
        setConfig(data) {
            if (!data) return;
            if (data.mbConfig) {
                this.slider = data.mbConfig.val;
                this.bgStyle = data.bgStyle.type;
                this.prConfig = data.prConfig.val;
                this.bgColor = data.bgColor.color[0].item;
                this.themeColor = data.themeColor.color[0].item;
                this.displayStyle = data.tabConfig.tabVal;
                this.titleUrl = data.logoConfig.url;
                this.shopList = this.generateShopList(data)
                this.titleShow = data.titleShow.val;
                this.priceShow = data.priceShow.val;
                this.distanceShow = data.distanceShow.val == 1;
            }
        }
    }
}
</script>

<style scoped lang="scss">
.shopOn {
    border-radius: 0 !important;
}

.page-shop {
    border-radius: 8px;
}

.home-shop {
    margin-bottom: 10px;

    .shop-info {
        position: relative;
        width: 100%;
        height: 100px;
        border-radius: 12px 12px 0 0;

        .bgImg {
            width: 100%;
            height: 100%;
            border-radius: 12px 12px 0 0;
        }

        .shop-title {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #fff;
            font-weight: bold;
            display: flex;
            align-items: center;
            max-width: 60%;
            border-radius: 12px;
            padding-inline: 2.5px;
            height: 24px;

            .empty-box {
                display: inline-block;
                width: 18px;
                height: 18px;
                margin-right: 4px;
                border-radius: 50%;
            }

            img {
                width: 18px;
                height: 18px;
                margin-right: 6px;
                border-radius: 50%;
            }

            .store-type {
                font-size: 10px;
                color: #fff;
                background-color: #e93323;
                padding: 0 5px;
                line-height: 19px;
                height: 19px;
                border-radius: 14px;
            }

            .shop-name {
                font-size: 14px;
                font-weight: 600;
                color: #282828;
            }

            .vertical-line {
                width: 1px;
                height: 12px;
                background-color: #D8D8D8;
                margin-inline: 4px;
            }


            .distance-text {
                margin-right: 6px;
                font-size: 12px;
                color: #282828;
                font-weight: initial;
            }
        }
    }

    .shop-product {
        display: flex;
        background: #fff;
        padding: 10px 10px 0;
        border-radius: 0 0 8px 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .item {
            width: 31.3%;
            margin: 0 3.05% 10px 0;

            &:last-child {
                margin-right: 0;
            }

            .empty-box {
                width: 107px;
                height: 107px;

                .icontupian {
                    font-size: 30px;
                }
            }

            .info {
                padding: 8px 5px 0;
                text-align: center;

                .name {
                    font-size: 14px;
                    color: #282828;
                }

                .price {
                    font-size: 12px;
                    margin-top: 5px;
                    font-weight: bold;

                    span {
                        font-size: 15px;

                    }
                }

            }
        }
    }
}

.shop-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;

    .list {
        width: 23.5%;
        margin: 0 2% 10px 0;
        background-color: #FEFEFF;
        border-radius: 6px;
        height: 70px;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .empty-box,
        img {
            width: 100%;
            height: 70px;
        }
    }
}

.shop-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 13px 0;
    color: #999999;
    font-size: 13px;

    .iconfont {
        font-size: 8px;
        margin-left: 3px;
    }
}

.title-count {
    text-align: center;
    padding: 10px 0;

    img {
        max-width: 100%;
        width: 133px;
        // height: 80px;
    }
}


.shop-info-wrapper {
    padding: 10px;
    padding-right: 0;
    background-color: #fff;

    &:last-child {
        margin-bottom: 10px;
    }

    &+.shop-info-wrapper {
        margin-top: 10px;
    }

    .shop-info-inner {
        display: flex;
        align-items: center;
    }

    .shop-avatar {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        margin-right: 10px;
    }

    .shop-info-detail {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .shop-name {
            font-size: 14px;
            font-weight: 600;
            color: #282828;
            display: flex;
            align-items: center;

            .shop-type {
                margin-left: 4px;
                padding-inline: 4px;
                height: 16px;
                border-radius: 2px;
                background: #E93323;
                color: #fff;
                font-size: 10px;
            }
        }

        .shop-other {
            font-size: 12px;
            color: #666666;
            display: flex;
            align-items: baseline;

            .vertical-line {
                width: 1px;
                height: 10px;
                background-color: #ccc;
                margin-inline: 4px;
            }
        }
    }

    .shop-good-wrapper {
        margin-top: 3px;
        margin-left: 60px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        .shop-good-list {
            display: flex;
            gap: 8px;
        }

        .empty-box,
        .good-img {
            width: 76px;
            height: 76px;
            border-radius: 8px;
        }

        .good-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11px;
            color: #282828;
            margin-top: 6px;
        }
        
        .good-price {
            color: #E93323;
            font-weight: 600;
            margin-top: 4px;
            font-size: 9px;
        }

    }
}
</style>
